<!-- 消息列表为空时，展示 prompt 列表 -->
<template>
  <div class="chat-empty">
    <!-- title -->
    <div class="center-container">
      <div class="title">柯莱特 AI</div>

      <div class="role-list">
        <div
          class="role-item"
          v-for="prompt in promptList"
          :key="prompt.prompt"
          @click="handlerPromptClick(prompt)"
        >
          <input
            v-if="prompt.isFile && prompt.fileType === 'resume'"
            type="file"
            class="fileInput"
            @click.stop=""
            @change="handleFileChange"
            accept=".pdf,.doc,.docx"
            ref="fileInputRef"
          />
          <input
            v-if="prompt.isFile && prompt.fileType === 'zip'"
            type="file"
            class="fileInput"
            @click.stop=""
            @change="handleZipFileChange"
            accept=".zip"
            ref="zipFileInputRef"
          />

          {{ prompt.prompt }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useMessage } from '@/hooks/web/useMessage'

interface PromptItem {
  prompt: string
  isFile?: boolean
  fileType?: 'resume' | 'zip'
}

const promptList = ref<PromptItem[]>([
  {
    prompt: '上传简历分析',
    isFile: true,
    fileType: 'resume'
  },
  {
    prompt: '批量上传简历',
    isFile: true,
    fileType: 'zip'
  }
  // {
  //   prompt: '写一首好听的诗歌?'
  // }
])
// prompt 列表

const emits = defineEmits(['onPrompt', 'onFileUpload', 'onZipFileUpload'])
const message = useMessage() // 使用全局消息组件
const fileInputRef = ref<HTMLInputElement | null>(null)
const zipFileInputRef = ref<HTMLInputElement | null>(null)

/** 选中 prompt 点击 */
const handlerPromptClick = async (prompt: PromptItem) => {
  if (prompt.isFile) {
    // 如果是文件上传选项，点击触发文件选择
    if (prompt.fileType === 'resume') {
      fileInputRef.value?.click()
    } else if (prompt.fileType === 'zip') {
      zipFileInputRef.value?.click()
    }
    return
  }
  // 普通提示直接发送
  emits('onPrompt', prompt.prompt)
}

/** 处理文件选择 */
const handleFileChange = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return

  // 检查文件类型
  const fileTypes = ['.pdf', '.doc', '.docx']
  const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
  if (!fileTypes.includes(fileExt)) {
    message.error('请上传PDF、DOC或DOCX格式的简历文件')
    return
  }

  // 提醒用户需要先设置公司和职位
  message.warning('请确保已在设置中选择了公司和招聘职位，否则上传可能失败')

  // 发送文件上传事件到父组件
  emits('onFileUpload', file)

  // 清空file input，以便于下次上传同一文件时能够触发change事件
  target.value = ''
}

/** 处理ZIP文件选择 */
const handleZipFileChange = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return

  // 检查文件类型
  const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
  if (fileExt !== '.zip') {
    message.error('请上传ZIP格式的简历文件包')
    return
  }

  // 提醒用户需要先设置公司和职位
  message.warning('请确保已在设置中选择了公司和招聘职位，否则上传可能失败')

  // 发送文件上传事件到父组件
  emits('onZipFileUpload', file)

  // 清空file input，以便于下次上传同一文件时能够触发change事件
  target.value = ''
}
</script>
<style scoped lang="scss">
.fileInput {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.chat-empty {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 100%;

  .center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 28px;
      font-weight: bold;
      text-align: center;
    }

    .role-list {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: center;
      width: 460px;
      margin-top: 20px;

      .role-item {
        position: relative;
        display: flex;
        width: 180px;
        margin: 10px;
        line-height: 50px;
        cursor: pointer;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        justify-content: center;
      }

      .role-item:hover {
        background-color: rgb(243 243 243 / 73%);
      }
    }
  }
}
</style>
